import {messages} from "share/common";
import React from 'react';
import { connect } from 'react-redux';
import {Button, Form, Input, Radio, Modal, Upload} from 'antd';
const FormItem = Form.Item;
import FeedbackManagementService from 'containers/setting/feedback-management/feedback-management.service'
import moment from "moment";
import feedbackService from 'containers/feedback/feedback.service';
const {TextArea} = Input;
const RadioGroup = Radio.Group;

class NewUpdateManagement extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      params: {},
      loading: false,
      record: {},
      issueItems: {},
    };
  }

  componentWillMount() {
    this.getFeedbackDetail();
    this.getIssueItems();
  };

  getFeedbackDetail = () => {
    FeedbackManagementService.getFeedbackDetail(this.props.params.id)
      .then(res => {
        res.data.modules = res.data.modules ? res.data.modules[0].id : "";
        res.data.tags = res.data.tags ? res.data.tags[0].id : "";
        this.setState({ record: res.data });
      }).catch(err => {

    })
  };

  getIssueItems = () => {
    feedbackService.getIssueItems({codes: ['MODULE', 'TAG', 'CHANNEL']}).then(res => {
      if(res.data){
        this.setState({ issueItems: res.data});
      }
    })
  };

  //新建或编辑
  handleSave = (e) => {
    const { record } = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({ loading: true });
        let item = {modules: [{id: values.modules}], tags: [{id: values.tags}], remark: values.remark};
        let param = Object.assign(record, item);
        FeedbackManagementService.updateFeedbackList(param).then((res) => {
          this.props.close();
          this.setState({ loading: false });
        }).catch((e) => {
            this.setState({ loading: false });
        })
      }
    });
  };

  onCancel = () => {
    this.props.close();
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { record, issueItems, visible, src } = this.state;
    const formItemLayout = {
      labelCol: { span: 7, },
      wrapperCol: { span: 16, },
    };

    return (
      <div className="new-payment-method">
        <Form className={'new-form'}>
          <FormItem  {...formItemLayout} label={messages('basic-4.key21')/*流水号*/}>
            <div>{record.feedbackNo}</div>
          </FormItem>
          <FormItem  {...formItemLayout} label={messages('basic-4.key25')/*提交时间*/}>
            <div>{record.createdDate ? moment(record.createdDate).format("YYYY-MM-DD HH:mm:ss") : null}</div>
          </FormItem>
          <FormItem  {...formItemLayout} label={messages('basic-4.key42')/*反馈内容*/}>
            <div>{record.issueContent}</div>
          </FormItem>
          <FormItem  {...formItemLayout} label={messages('basic-4.key43')/*图片*/}>
            {
              (record.pictureUrls || []).map((item) => {
                return (
                  <div style={{width: 120, height: 120, display: "inline-block", cursor: "pointer"}}
                       onClick={() => {window.open(item)}}>
                    <img src={item} width={100} height={100}/>
                  </div>
                )
              })
            }
          </FormItem>
          <FormItem  {...formItemLayout} label={messages('basic-4.key44')/*反馈人员*/}>
            <div>{record.username}</div>
          </FormItem>
          <FormItem  {...formItemLayout} label={messages('basic-4.key45')/*联系方式*/}>
            <div>{record.issueContent}</div>
          </FormItem>
          <FormItem  {...formItemLayout} label={messages('basic-4.key46')/*邮箱*/}>
            <div>{record.email}</div>
          </FormItem>
          <FormItem  {...formItemLayout} label={messages('basic-4.key23')/*渠道*/}>
            <div>{record.clients && record.clients[0].name}</div>
          </FormItem>
          <FormItem {...formItemLayout} label={messages('common.label')/*标签*/}>
            {getFieldDecorator('tags',{
              initialValue: record.tags
            })(
              <RadioGroup>
                {
                  (issueItems.TAG || []).map(item => {
                    return <Radio value={item.id} key={item.id}>{item.name}</Radio>
                  })
                }
              </RadioGroup>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('basic-4.key22')/*模块*/}>
            {getFieldDecorator('modules',{
              initialValue: record.modules
            })(
              <RadioGroup>
                {
                  (issueItems.MODULE || []).map(item => {
                    return <Radio value={item.id} key={item.id}>{item.name}</Radio>
                  })
                }
              </RadioGroup>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('basic-4.key47')/*备注temp*/}>
            {getFieldDecorator('remark', {
              initialValue: record.remark
            })(
              <TextArea rows={5} placeholder={messages('common.please.input')/*请输入*/}/>
            )}
          </FormItem>
          <div className="slide-footer">
            <Button type="primary" onClick={this.handleSave}
                    loading={this.state.loading}>{messages('common.save')/*保存*/}</Button>
            <Button onClick={this.onCancel}>{messages('common.cancel')/*取消*/}</Button>
          </div>
        </Form>
      </div>
    )
  }
}

const WrappedNewUpdateManagement = Form.create()(NewUpdateManagement);
function mapStateToProps(state) {
  return {}
}
export default connect(mapStateToProps)(WrappedNewUpdateManagement);
